{extend name="public/common"}

{block name="style"}
<title>上级来文</title>
<link rel="stylesheet" href="/home/css/documents/index.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>

    <div class="head">
        <div v-for="item in navbar" :class="selected == item.key ? 'active' : ''" @click="choose(item.key)">{{item.name}}</div>
    </div>
    <div class="neck">
        <div class="time-box" @click="chooseTime">
            <div class="time">{{queryTime | timeToString('ym')}}</div>
            <i class="fa fa-angle-down"></i>
        </div>
        <div class="flex">
            <div class="screen-box">
                <input type="text" v-model="search" class="screen" placeholder="输入标题或手机号搜索" :maxlength="16">
            </div>
            <div class="search-button reset" @click="searchList('reset')">重置</div>
            <div class="search-button search" @click="searchList()">搜索</div>
        </div>
        <mt-datetime-picker
          v-model="time"
          type="date"
          ref="timePicker"
          cancelText="全部"
          year-format="{value} 年"
          month-format="{value} 月"
          @confirm="timeConfirm"
          class="timePicker"
          @cancel="cancelHandle"
        >
        </mt-datetime-picker>
    </div>
    <div class="list" infinite-scroll-immediate-check =false v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <ul v-for="(child,i,key) in list" v-show="selected == (key+1)">
            <li @click="toDetail(item.id)" v-for="item in child">
                <p>{{item.title}}</p>
                <div>
                    <span>{{item.type_text}}</span>
                    <span>{{item.create_time | timeToString('ymd')}}</span>
                </div>
            </li>
        </ul>
        <div class="loading-more" v-if="len >= 8">
            <div v-if="loadOver && len >= 8" class="load" style="font-size:0.3rem">{{texts}}</div>
            <div v-else v-show="loading">
                <mt-spinner :type="3" color="#999"></mt-spinner>
            </div>
        </div>
    </div>
    <div class="empty" v-if="len == 0">
        <img class="empty-img" src="/home/images/common/empty.png" alt="">
        <p class="empty-title">暂无内容，尽请期待</p>
        <p class="empty-text">to be continued...</p>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$permission})
    console.log({$list})
    var vm = new Vue({
        el:'#app',
        data:{
            selected: 1,
            texts: '没有更多了~',
            loading: false,
            loadOver: true,
            list: {$list},
            len: {$list}.list_1.length,
            navbar: [
                {
                    name:'待分发',
                    key:1
                },
                {
                    name:'轮阅中',
                    key:2
                },
                {
                    name:'已归档',
                    key:3
                }
            ],
            permission: {$permission},
            search:'',
            queryTime: '',
            time: new Date()
        },
        created() {
            var temp = 1;
            if(this.permission == 3) {
                this.navbar = [
                    {
                        name:'轮阅中',
                        key:2
                    },
                    {
                        name:'已归档',
                        key:3
                    }
                ];
                temp = 2;
                this.len = this.list['list_2'].length;
            }
            this.selected = window.sessionStorage.getItem('document_type')?window.sessionStorage.getItem('document_type'):temp;
            window.sessionStorage.removeItem('document_type');
        },
        methods:{
            choose(key) {
                var type = 'list_'+key;
                this.selected = key;
                this.len = this.list[type].length;
                this.search = '';
                this.time = new Date();
                this.queryTime = '';
                this.loadOver = true;
                this.loading = false;
            },
            loadMore: function (loadType) {
                var _this = this;
                var type = 'list_'+_this.selected;

                if(loadType === 'reset') {
                    _this.len = 0;
                    _this.list[type] = [];
                } else {
                    if(_this.len < 8){
                        return false
                    }
                }
                _this.loading = true;
                _this.loadOver = false;
                _this.$http.post('{:Url("Documents/index")}', {
                    'status': parseInt(_this.selected) - 1,
                    'length': _this.len,
                    'query_time': _this.queryTime,
                    'search_value': _this.search
                }, {emulateJSON: true}).then(function (res) {
                    var data = res.data;
                    console.log(data)
                    if(data.code == 1){
                        if (data.data.length == 8) {
                            _this.loading = false;
                        } else {
                            _this.loadOver = true;
                        }
                        for(var i in data.data){
                            _this.list[type].push(data.data[i]);
                        }
                        _this.len = _this.list[type].length;
                    }else{
                        _this.loadOver = true;
                    }
                }, function () {
                    _this.$toast({message:'加载失败，请重试',duration:1500});
                    _this.loadOver = true;
                })
            },
            toDetail: function(id){
                window.location.href = '/home/documents/detail/id/'+id+'.html'
            },
            chooseTime() {
                this.$refs.timePicker.open();
            },
            timeConfirm(val) {
                var type = 'list_'+this.selected;
                this.time = val;
                this.queryTime = val.getTime() / 1000;
                this.loadMore('reset');
            },
            cancelHandle() {
                this.time = new Date();
                this.queryTime = '';
                this.loadMore('reset');
            },
            searchList(type) {
                if(type === 'reset') {
                    this.search = '';
                    this.queryTime = '';
                }
                this.loadMore('reset');
            }
        }
    })
</script>
{/block}
